<template>
  <div class="wrapper">
    <div class="wrapper bg-white border-rounded-xl p-3.5 box-shadow-sm">
      <div class="py-3"><h2 class="font-600">搜索结果</h2></div>
      <div class="filter-wrapper flex justify-between items-center pt-2 pb-3.5">
        <div class="flex items-center">
          <div
            class="item flex items-center cursor-pointer mr-2"
            :class="{ active: isActive('综合') }"
            @click="handleFilterClick('综合')"
          >
            <span class="">综合</span>
            <el-icon><Bottom /></el-icon>
          </div>
          <div
            class="item flex items-center cursor-pointer mr-2"
            :class="{ active: isActive('销量') }"
            @click="handleFilterClick('销量')"
          >
            <span>销量</span>
            <el-icon><Bottom /></el-icon>
          </div>
          <div
            class="item flex items-center cursor-pointer mr-2"
            :class="{ active: isActive('评论数') }"
            @click="handleFilterClick('评论数')"
          >
            <span>评论数</span>
            <el-icon><Bottom /></el-icon>
          </div>
          <div
            class="item flex items-center cursor-pointer mr-2"
            :class="{ active: isActive('新品') }"
            @click="handleFilterClick('新品')"
          >
            <span>新品</span>
            <el-icon><Bottom /></el-icon>
          </div>
          <div
            class="item flex items-center cursor-pointer mr-2"
            :class="{ active: isActive('价格') }"
            @click="handleFilterClick('价格')"
          >
            <span>价格</span>
            <el-icon><DCaret /></el-icon>
          </div>
          <div
            class="item cursor-pointer mr-2 pos-relative"
            @mouseleave="showPriceDropdown = false"
          >
            <div class="flex items-center" @mouseenter="handleFilterHover()">
              <span class="mr-1">价格区间</span>
              <el-icon><ArrowDown /></el-icon>
            </div>
            <Transition name="el-zoom-in-top">
              <div
                class="filter-dropdown pos-absolute"
                style="top: 100%; left: -80%; width: 230px; min-height: 200px"
                v-show="showPriceDropdown"
              >
                <div class="h-2.5"></div>
                <div class="border rounded-lg bg-white pt-2 pos-relative box-shadow-md">
                  <b
                    class="arrow-down triangle"
                    style="
                      position: absolute;
                      top: -10px;
                      left: 50%;
                      transform: translateX(-50%);
                    "
                  ></b>
                  <div class="filter-dropdown-content pt-3 px-1">
                    <div class="flex items-center justify-between px-2">
                      <h6>价格区间</h6>
                      <span>
                        <el-icon size="16"><Close /> </el-icon>
                      </span>
                    </div>
                    <div class="flex items-center mt-4 px-2">
                      <el-input placeholder="最低价"></el-input>
                      <span class="mx-2">-</span>
                      <el-input placeholder="最高价"></el-input>
                    </div>
                    <div class="price-options pl-2">
                      <el-scrollbar height="230px" class="pr-2">
                        <div class="pr-1">
                          <div class="mt-2 w-full item text-center text-gray-600">
                            <span class="text-sm">0 - 960</span>
                            <p class="block text-xs text-gray-400">11%的选择</p>
                          </div>
                          <div class="mt-2 w-full item text-center text-gray-600 active">
                            <span class="text-sm">0 - 960</span>
                            <p class="block text-xs text-gray-400">11%的选择</p>
                          </div>
                          <div class="mt-2 w-full item text-center text-gray-600">
                            <span class="text-sm">0 - 960</span>
                            <p class="block text-xs text-gray-400">11%的选择</p>
                          </div>
                          <div class="mt-2 w-full item text-center text-gray-600">
                            <span class="text-sm">0 - 960</span>
                            <p class="block text-xs text-gray-400">11%的选择</p>
                          </div>
                          <div class="mt-2 w-full item text-center text-gray-600">
                            <span class="text-sm">0 - 960</span>
                            <p class="block text-xs text-gray-400">11%的选择</p>
                          </div>
                        </div>
                      </el-scrollbar>
                    </div>
                    <div class="flex items-center justify-center pt-3">
                      <el-button>重置</el-button>
                      <el-button type="primary">确定</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </Transition>
          </div>
          <div
            class="item cursor-pointer mr-2 pos-relative"
            @mouseleave="showAddressDropdown = false"
          >
            <div class="flex items-center" @mouseenter="handleAddressHover()">
              <span class="pr-2">配送至</span>
              <span class="pr-2">北京海淀区上地街道</span>
              <el-icon><ArrowDown /></el-icon>
            </div>
            <Transition name="el-zoom-in-top">
              <div
                class="filter-dropdown pos-absolute"
                style="top: 100%; left: -120%; width: 630px; min-height: 200px"
                v-show="showAddressDropdown"
              >
                <div class="h-2.5"></div>
                <div class="border rounded-lg bg-white pt-2 pos-relative box-shadow-md">
                  <b
                    class="arrow-down triangle"
                    style="
                      position: absolute;
                      top: -10px;
                      left: 50%;
                      transform: translateX(-50%);
                    "
                  ></b>
                  <div class="filter-dropdown-content px-1">
                    <AddressPanel @close="showAddressDropdown = false" />
                  </div>
                </div>
              </div>
            </Transition>
          </div>
        </div>
        <div class="flex items-center">
          <span class="text-3.5 text-gray-500"
            >为你找到<b class="text-gray-600">3100+</b>个商品</span
          >
          <div class="flex items-center px-2">
            <el-icon class="cursor-pointer" size="16"><ArrowLeft /></el-icon>
            <span class="px-2"><i class="text-red-600">2</i>/55</span>
            <el-icon class="cursor-pointer" size="16"><ArrowRight /></el-icon>
          </div>
        </div>
      </div>
      <div class="flex justify-between filter-list items-start" ref="filterWrapperRef">
        <div
          class="flex flex-wrap transition-all duration-300 overflow-hidden"
          :style="{ height: isOpen ? 'auto' : '40px' }"
        >
          <div class="item border-1 cursor-pointer rounded-md mr-3">
            <div class="flex items-center px-2 py-1.5">
              <span class="text-3.5">京东物流</span>
            </div>
          </div>
          <div class="item border-1 cursor-pointer rounded-md mr-3">
            <div class="flex items-center px-2 py-1.5">
              <span class="text-3.5 font-600 text-green">国家补贴</span>
            </div>
          </div>
          <div class="item border-1 cursor-pointer rounded-md mr-3">
            <div class="flex items-center px-2 py-1.5">
              <span class="text-3.5 font-600 text-red-5">百亿补贴</span>
            </div>
          </div>
          <div class="item mr-3 pos-relative dropdown">
            <FilterDropdown
              title="自营/旗舰"
              label="saleType"
              :isExpand="isExpand.saleType"
              :nums="filterStyle.saleType"
              @toggle="toggleExpand('saleType')"
              @close="closeAllModals('saleType')"
            >
              <template #content> </template>
            </FilterDropdown>
          </div>
          <div class="item border-1 cursor-pointer rounded-md mr-3">
            <div class="flex items-center px-2 py-1.5">
              <span class="text-3.5 font-600 text-red-5">百亿补贴</span>
            </div>
          </div>
          <div class="item border-1 cursor-pointer rounded-md mr-3">
            <div class="flex items-center px-2 py-1.5">
              <span class="text-3.5 text-red-5">百亿补贴</span>
            </div>
          </div>
          <div class="item mr-3 pos-relative dropdown">
            <FilterDropdown
              title="品牌"
              label="brand"
              :isExpand="isExpand.brand"
              :nums="filterStyle.brand"
              @toggle="toggleExpand('brand')"
              @close="closeAllModals('brand')"
            >
              <template #content>
                <div class=""></div>
              </template>
            </FilterDropdown>
          </div>
          <div class="item border-1 cursor-pointer rounded-md mr-3">
            <div class="flex items-center px-2 py-1.5">
              <span class="text-3.5">百亿补贴</span>
            </div>
          </div>
          <div class="item border-1 cursor-pointer rounded-md mr-3">
            <div class="flex items-center px-2 py-1.5">
              <span class="text-3.5">百亿补贴</span>
            </div>
          </div>
          <div class="item border-1 cursor-pointer rounded-md mr-3">
            <div class="flex items-center px-2 py-1.5">
              <span class="text-3.5">百亿补贴</span>
            </div>
          </div>
          <div class="item border-1 cursor-pointer rounded-md mr-3 active">
            <div class="flex items-center px-2 py-1.5">
              <span class="text-3.5">仅显示有货</span>
            </div>
          </div>
          <div class="item border-1 cursor-pointer rounded-md mr-3">
            <div class="flex items-center px-2 py-1.5">
              <span class="text-3.5">百亿补贴</span>
            </div>
          </div>
          <div class="item border-1 cursor-pointer rounded-md mr-3">
            <div class="flex items-center px-2 py-1.5">
              <span class="text-3.5">百亿补贴</span>
            </div>
          </div>
        </div>
        <div class="flex items-center justify-end pr-3" style="min-width: 215px">
          <div class="item cursor-pointer rounded-md mr-3" style="line-height: 1">
            <div class="flex items-center px-2 py-1.5" @click="handleTigeer">
              <span class="text-3.5 pr-1">{{ isOpen ? "收起" : "更多" }}</span>
              <el-icon size="14" color="#666"><ArrowDown /></el-icon>
            </div>
          </div>
          <div class="item mr-3 pos-relative dropdown">
            <FilterDropdown
              title="全部筛选"
              label="all"
              :isExpand="isExpand.all"
              :nums="filterStyle.all"
              @toggle="toggleExpand('all')"
              @close="closeAllModals('all')"
            >
              <template #content>
                <div class=""></div>
              </template>
            </FilterDropdown>
          </div>
        </div>
      </div>
      <div class="py-2">
        <ProductList></ProductList>
      </div>
    </div>
    <div class="h-5"></div>
    <div>
    <YouMayAlsoLike></YouMayAlsoLike>
    </div>
    
    <div class="h-5"></div>
    <div>
      <FeaturedProducts></FeaturedProducts>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import {
  Bottom,
  DCaret,
  ArrowDown,
  Close,
  ArrowLeft,
  ArrowRight,
  Filter,
  Select,
} from "@element-plus/icons-vue";

import FilterDropdown from "./../Search/components/FilterDropdown.vue";
import ProductList from "./../Search/components/ProductList.vue";
import AddressPanel from "@/components/ui/AddressPanel.vue";
import YouMayAlsoLike from "@/components/product/YouMayAlsoLike.vue";
import FeaturedProducts from "@/components/product/FeaturedProducts.vue";

const activeFilter = ref("综合");
const isActive = (filter: string) => {
  return activeFilter.value === filter;
};
const handleFilterClick = (filter: string) => {
  activeFilter.value = filter;
};

const showPriceDropdown = ref(false);
const handleFilterHover = () => {
  showPriceDropdown.value = true;
};
const showAddressDropdown = ref(false);
const handleAddressHover = () => {
  console.log("hover");
  showAddressDropdown.value = true;
};
const filterWrapperRef = ref<HTMLDivElement | null>(null);
const isExpand = ref<any>({
  saleType: false,
  brand: false,
  all: false,
});

const filterStyle = ref<any>({
  saleType: {},
  brand: {},
  all: {},
});
// 展开/收起
const isOpen = ref(false);
const handleTigeer = () => {
  isOpen.value = !isOpen.value;
  Object.keys(isExpand.value).forEach((key) => {
    isExpand.value[key] = false;
  });
};
const toggleExpand = (filterName: string) => {
  console.log(filterName);
  Object.keys(isExpand.value).forEach((key) => {
    if (key !== filterName) {
      isExpand.value[key] = false;
    }
  });
  isExpand.value[filterName] = !isExpand.value[filterName];
  // 如果关闭状态，不需要计算位置
  if (!isExpand.value[filterName]) return;

  nextTick(() => {
    if (!filterWrapperRef.value) return;

    const element = document.querySelector(
      `.dropdown-trigger[data-filter="${filterName}"]`
    )?.parentElement;
    const parent = element?.parentElement;
    if (!element) return;
    if (!parent) return;
    filterStyle.value[filterName] = {
      left1: filterWrapperRef.value.offsetLeft,
      left2: parent.offsetLeft,
      width1: filterWrapperRef.value.offsetWidth,
      width2: element.offsetWidth,
      top: filterWrapperRef.value.offsetTop + 35,
    };
  });
};

const closeAllModals = (type: any) => {
  console.log("关闭", type);
  isExpand.value[type] = false;
};

onMounted(() => {
  document.body.style.background = "#f5f5f5";
});
</script>
<style scoped lang="scss">
body {
  background: #ccc;
}
.triangle {
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid rgb(255, 255, 255);
}
.filter-wrapper {
  .item {
    font-size: 0.8rem;
    margin-right: 20px;
  }
}
.filter-dropdown {
  z-index: 208;
  .arrow-down {
  }
  .filter-dropdown-content {
    transform: translateY(-10px);
  }
}

.filter-list {
  .item {
    margin-bottom: 10px;
    .icon {
      display: none;
    }
    &.active {
      border: 1px solid #f50101;
      background-color: #ffdede;
      color: #fd0000;
      .icon {
        display: block;
      }
    }
  }
}
.price-options {
  .item {
    border: 1px solid #cccaca;
    padding: 5px 0;
    border-radius: 5px;
  }
  .item.active {
    background-color: #ffffff;
    border: 1px solid #f50101;
    span {
      color: #ff4d4f;
    }
    p {
      color: #e257599f;
    }
  }
}
</style>
